import { Carousel } from 'antd';
import {HeartOutlined , EyeOutlined ,BranchesOutlined} from '@ant-design/icons';
import {useSelector, useDispatch,useStore, IRouteComponentProps } from 'umi'
import { useEffect, useState } from 'react';
import moment from 'moment';
import './article.less'
const typelist=['所有','前端','后端','阅读','Linux','LeetCode','要闻']

interface RootObject {
    id: string;
    title: string;
    cover?: string;
    summary?: string;
    content: string;
    html: string;
    toc: string;
    status: string;
    views: number;
    likes: number;
    isRecommended: boolean;
    needPassword: boolean;
    isCommentable: boolean;
    publishAt: string;
    createAt: string;
    updateAt: string;
    tags: Tag[];
    category?: Tag;
  }
  
  interface Tag {
    id: string;
    label: string;
    value: string;
    createAt: string;
    updateAt: string;
  }
  moment.locale('zh-CN');
const article:React.FC<IRouteComponentProps>=({history})=>{
    const [carindex,setCarindex]=useState(0)

    const state= useSelector(state => state.articles1) 
    const taiyang=useSelector(state=>state.index)
    const dispatch = useDispatch()
    console.log('太阳',taiyang.flag);
    console.log(history);
    
    // console.log('DATA',state);
    // console.log('article-dispatch',dispatch);
    // const [swiper,setSwiper]=useState<RootObject []>([])
    useEffect(() => {
      dispatch({
        type:"articles1/getarticle",
      })
    }, [])
    return <div className={taiyang.flag?'article':"article yueliang"}>
        <div className='articleHeader'>
            <Carousel autoplay>
                {
                        state.bannerlist.data && state.bannerlist.data.map((item:any,index:number)=>{
                            return <div className='item' key={index} onClick={()=>{

                                dispatch({
                                    type:"articles1/BannerListDetail",
                                    payload:{
                                        id:item.id
                                    }
                                })
                                history.push(`/article/${item.id}`)
                            }
                            }>
                                <img src={item.cover} alt="" />
                                <div> 
                                    <h3>计算机工作原理</h3> 
                                    <span>大约{moment(item.createAt).fromNow(false)}·{ item.views && item.views}次阅读</span> 
                                </div>
                            </div>
                        })
                }
            </Carousel>
        </div>
        <div className='articleSider'>
            <h3>推荐阅读</h3>
            <ul className='read'>
                {
                    state.siderList.data && state.siderList.data.map((item :any,index:number)=>{
                        return <li key={item.id} className={'index'+index} onClick={()=>{
                            history.push(`/article/${item.id}`)
                        }}>
                            {item.title} <span className='time'>  ·大约{moment(item.publishAt).fromNow()}</span>
                        </li>
                    })
                }
            </ul>
            <h3>文章标签</h3>
            <ul className='tag'>
                {
                    state.tagList.data && state.tagList.data.map((item:any,index:number)=>{
                        return <li key={index}
                                    onClick={()=>{
                                        history.push(`/tag/${item.value}`)
                                    }}
                        >
                            {item.label}[{item.articleCount}]
                        </li>
                    })
                }
            </ul>
        </div>
        <div className='articleContent'>
            <div className='ContentType'>
                {
                    typelist.map((item,index)=>{
                        return <span key={index} onClick={()=>setCarindex(index)} className={carindex==index? 'active' :''}> {item} </span>
                    })
                }
                </div>
        {
               state.list.data && state.list.data[0].map((item:any,index:number)=>{
                    return <div key={index} className='item' onClick={()=>{
                        history.push(`/article/${item.id}`)
                    } }>
                        <p> <span className='articlef90'>{item.title} </span> <span> {item.category &&'大约'+moment(item.publishAt, "YYYYMMDD").fromNow() } </span> <span> 丨 </span><span> {item.category && item.category.label} </span></p>
                        <dl>
                            <dt>
                                <img src={item.cover} alt="" />
                            </dt>
                            <dd>
                                <p> {item.summary} </p>
                                <p><HeartOutlined /> {item.likes} <EyeOutlined /> {item.views}  <BranchesOutlined />分享 </p>
                            </dd>
                        </dl>
                    </div>
                })
            }
        </div>
    </div>
}
export default article
